<!doctype html>
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org" >

	<head>
		<meta charset="utf-8">
		<title>用户中心-上传头像</title>
		<link href="../c/base.css" rel="stylesheet" type="text/css">
		<link href="../c/toefl.css" rel="stylesheet" type="text/css">
		<script src="../j/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../user/js/userinfor.js">
		</script>
		<style>
	        .fileinput-button {
	            position: relative;
	            display: inline-block;
	            overflow: hidden;
	        }
	
	        .fileinput-button input{
	            position:absolute;
	            right: 0px;
	            top: 0px;
	            opacity: 0;
	            -ms-filter: 'alpha(opacity=0)';
	            font-size: 200px;
	        }
   		 </style>
	</head>
	<script type="text/javascript">
		function  saveUserInfo() {
            $("#editForm").submit();

        }

		function  editPassword() {

			var oldPassword = $("#oldPassword").val();
            var newPassword = $("#newPassword").val();
    		var rePassword = $("#rePassword").val();
    		var msg = "";

    		if(typeof (oldPassword) == 'undefined' || oldPassword.trim()==""){
    			alert("旧密码不能为空！");
    			return false;
    		}else if(typeof (newPassword) == 'undefined' || newPassword.trim()==""){
    			alert("新密码不能为空！");
    			return false;
    		}else if(typeof (rePassword) == 'undefined' || rePassword.trim()==""){
    			alert("确认新密码不能为空！");
				return false;
    		}

    		if (newPassword != rePassword){
    			alert("两次密码不一致！");
    			return false;
    		}else{
   				$.ajax({
   					url:'editUserPassword',
   					type:'POST',
   					data:{
   						oldPassword:oldPassword.trim(),
   			        	newPassword:newPassword.trim(),
   					},
   					success:function(result){
   						flag = result;
   						if(flag < 1){
   							/* $.ligerDialog.error("旧密码不正确！"); */
   							alert("旧密码不正确！");
   						}else{
   							alert("修改成功！");
   						}
   					}
   				})

    		}
        }

	</script>

	<body>
		<div class="doc910 fn-right">
			<div class="flcb_cardMenu">
				<ul>
					<li class="on">
						<a href="###" target="infor" id="basic">基本资料</a>
					</li>
					<li>
						<a href="###" target="infor" id="imgUpload">头像设置</a>
					</li>
					<li>
						<a href="###" target="infor" id="passwordChange">密码设置</a>
					</li>
				</ul>
			</div>
            <form action="edituUerInfo" method="post" id="editForm" th:if="${session.loginMessage == 'user'}">
			<div class="userCenter" style="display: block;" id="basicContent" th:object="${session.sess_user}">
				<dl>
					<dt>用户名：</dt>
					<dd><input type="text" class="userCenter_input" th:value="*{login_name}" name="login_name"></dd>
				</dl>
				<dl>
					<dt>性别：</dt>
					<dd>
						<div class="userCenter_radio">
							<input name="sex" type="radio" th:value="0" th:checked="*{sex eq '0'}"><span>男</span>
							<input name="sex" type="radio" th:value="1"  th:checked="*{sex eq '1'}"><span>女</span>
						</div>

					</dd>
				</dl>
				<dl>
					<dt>邮箱：</dt>
					<dd><input type="text" class="userCenter_input" th:value="*{email}" name="email"></dd>
				</dl>
				<dl>
					<dt>电话：</dt>
					<dd><input type="text" class="userCenter_input" th:value="*{phone_num}" name="phone_num"></dd>
				</dl>
				<dl>
					<dt>出生日期：</dt>
					<dd  >
						<select name="bitrhy" class="userCenter_y"  >
							<option th:text="*{#dates.format(birthday,'yyyy')}"></option>
                            <option th:each="y : ${year}" th:text="${y}"></option>
						</select>
						<select class="userCenter_m" name="birthm">
                            <option th:text="*{#dates.format(birthday,'MM')}"></option>
							<option th:each="m : ${month}" th:text="${m}"></option>
						</select>
					</dd>
				</dl>
				<dl>
					<dt>个性签名：</dt>
					<dd><textarea   class="userCenter_t" name="personalize_signature" >[[*{personalize_signature}]]</textarea>
						<p class="userCenter_text">请输入2-100个字符</p>
					</dd>
				</dl>
				<dl>
					<dt></dt>
					<dd>
						<a href="###" class="userCenter_save" onclick="saveUserInfo()">保存</a>
					</dd>
				</dl>
			</div>
            </form>


			<div class="userCenter" style="display: none;" id="passwordChangeContent">
				<dl>
					<dt>旧密码：</dt>
					<dd><input name="oldPassword" id="oldPassword" type="password" class="userCenter_input"></dd>
				</dl>
				<dl>
					<dt>新密码：</dt>
					<dd><input name="newPassword" id="newPassword" type="password" class="userCenter_input"></dd>
				</dl>
				<dl>
					<dt>确认新密码：</dt>
					<dd><input name="rePassword"  id="rePassword" type="password" class="userCenter_input"></dd>
				</dl>
				<dl>
					<dt></dt>
					<dd>
						<a href="###" class="userCenter_save" onclick="editPassword()">修改密码</a>
					</dd>
				</dl>
			</div>

			<div class="userTX" style="display: none;" id="imgUploadContent">
				<form action="userUpload" enctype="multipart/form-data" method="post">
					<div class=" fn-clear">
						<input class="btn btn-success" type="submit" value="上传图片">
					</div>
					<div class="userTXPic">
						<div class="userTXPicText">仅支持JPG、PNG格式且文件小于5M</div>
						<div class="userTX_240x240"><img width="240" height="240" th:src="${session.sess_user.img_url}"></div>
					</div>
					<div class="userTXShow">
						<div class="fn-clear">
							<div class="userTXPicText">您上传的图片会自动生成一下三种尺寸，请观察是否清晰</div>
							<div class="userTX_150x150"><img width="150" height="150" th:src="${session.sess_user.img_url}"><span>150*150</span></div>
							<div class="userTX_60x60"><img width="60" height="60" th:src="${session.sess_user.img_url}"><span>60*60</span></div>
							<div class="userTX_30x30"><img width="30" height="30" th:src="${session.sess_user.img_url}"><span>30*30</span></div>
						</div>
						<span class="btn btn-success fileinput-button">
				            <span>选择图片</span>
				            <input type="file" accept=".jpg,.png" name="upImage">
	       				</span>
					</div>
				</form>
			</div>

		</div>

	</body>

</html>